import React from './react';
import ReactDOM from './react-dom';



class ChildCounter extends React.Component {
  static defaultProps = {
    name: 'childCounter'
  }

  componentWillMount() {
    console.log('childCounter 1 componentWillMount')
  }
  componentDidMount() {
    console.log('childCounter 3 componentDidMount')
  }
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.count % 3 === 0;
  }
  componentWillReceiveProps() {
    console.log('childCounter 4.componentWillReceiveProps')
  }
  componentWillUnmount() {
    console.log('childCounter 5.componentWillUmount')
  }
  render() {
    console.log('childCounter 2 render')
    return <div>{this.props.count}</div>
  }





}

class Counter extends React.Component {
  static defaultProps = {
    name: 'Counter'
  }
  constructor(props) {
    super(props);
    this.state = { number: 0 };
    console.log('Counter 1.constructor');
  }
  componentWillMount() {
    console.log('Counter2 componentWillMount');
  }
  componentWillUpdate() {
    console.log('Counter6 componentWillUpdate');
  }
  handleClick = (event) => {
    this.setState({ number: this.state.number + 1 })
  }
  render() {
    console.log('Counter3 render');

    return <div id={`id_${this.state.number}`}>
      <p>{this.state.number}</p>
      {this.state.number === 4 ? null : <ChildCounter count={this.state.number} />}
      <button onClick={this.handleClick}>+</button>
    </div>
  }
  shouldComponentUpdate() {
    console.log('Counter5 shouldComponentUpdate')
    return true
  }
  componentDidMount() {
    console.log('Counter 4.componentDidMount');
  }
  componentDidUpdate() {
    console.log('Counter7 componentDidUpdate')
  }
}

let element = React.createElement(Counter, { name: 'zhufeng' })


ReactDOM.render(
  element,
  document.getElementById('root')
);
